<template>
    <el-select v-model="selected" :placeholder="placeholder" :style="{ width: width }" :multiple="multiple"
        @change="handleChange">
        <el-option v-for="item in options" :key="item.name" :label="item.description" :value="item.value" />
    </el-select>
</template>
<script lang="ts" setup>
import { enums } from '@/plugins/enums/enums';
import { computed, ref, watch } from 'vue';
const emits = defineEmits(['update:value', 'change'])
const props = defineProps({
    name: {
        type: String,
        required: true,
        default: ''
    },
    multiple: {
        type: Boolean,
        default: false
    },
    placeholder: {
        type: String,
        default: '请选择'
    },
    width: {
        type: Number,
        default: 100
    },
    value: {
        type: Object,
        default: undefined
    }
})
const selected = ref<string | number | Array<string> | Array<number> | undefined>()
const options = computed(() => {
    if (props.name) {
        const data = enums[props.name]?.items || [];
        return data;
    }
    return [];
})
watch(props.value, (val: any) => {
    selected.value = val;
}, { immediate: true })
const handleChange = function (val: any) {
    emits('update:value', val);
    emits('change', val);
}
</script>